<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--1.vue生命周期
        1>，初始化显示
        *beforeCreate()
        *created()
        *beforeMount()
        *mounted()
        2>,更新显示 ：this.xxx = value
        *beforeUpdate()
        *updated()
        3>销毁vue实例：vm.$destroy ()
        *beforeDestroy()
        *destroyed()
        2.常用的生命周期方法
        created()/mounted()：发送ajax请求，启动定时器或异步任务
        beforeDestroy()：做收尾的动作例如清除定时器
        -->
</div>
<script>
    let App = {
        template:`
        <div>
            <button @click="destroyVM">destroy vm</button>
            <p v-show="isShow">狄狄大漂亮</p>
        </div>
        `,
        data(){
            return{
                isShow:true
                }
            },methods:{
                destroyVM(){
                // 干掉VM
                this.$destroy()
                    }
                },
            //初始化阶段
            beforeCreate(){
                console.log('beforeCreate');
            },
            created(){
                console.log('beforeCreate');
            },
            beforeMount(){
                console.log('beforeMount');
            },
            mounted(){//初始化显示之后立即调用1次
                this.intervalID = setInterval(()=>{
                console.log('----');
                this.isShow = !this.isShow//更新数据 
            },1000)
                },
                //更新阶段
                beforeUpdate(){
                console.log('beforeUpdate');
            },
            updated(){
                console.log('updated');
            },
            //死亡阶段
            beforeDestroy(){//死亡之前调用1次
                //清除定时器
                clearInterval(this.intervalID)
            },
            destroyed(){
                console.log(destroyed);
            },
            
    }
    new Vue({
            render: h => h(App)
        }).$mount("#app")
</script>
</body>
</html>